<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <parameter-encoding default-charset="UTF-8"/>
    <ui:composition template="template/layout.xhtml">
        <ui:define name="title">Projet 1 : Acceuil</ui:define>
        <ui:define name="navigation">
            <ul>
                <ui:repeat var="cat" value="#{produitManagedBean.liste}" varStatus="status">
                    <li>
                        <h:outputLink value="categorie.xhtml?id=#{cat.id}">#{cat.nom}</h:outputLink>
                        <ul>
                            <ui:repeat var="souscat" value="#{cat.sousCategories}" varStatus="status2">
                                <li><h:outputLink value="souscategorie.xhtml?id=#{souscat.id}">#{souscat.nom}</h:outputLink></li>
                            </ui:repeat>
                        </ul>
                    </li>
                </ui:repeat>
            </ul>            
        </ui:define>

        <ui:define name="content">
            <h:form id="formrecappanier">
                <p:growl id="msg" />
                <p:dataTable id="datatable" var="prod"  value="#{mbPanier.produitsList}" emptyMessage="Panier vide">  

                <f:facet name="header">  
                    Recapitulatif panier
                </f:facet> 
                <p:column>  
                    <f:facet name="header">  
                        <h:outputText value="Nom produit" />  
                    </f:facet>  
                    <h:outputText value="#{prod.produitVignette.nom}" />  
                </p:column>

                <p:column>  
                    <f:facet name="header">  
                        <h:outputText value="Quantité" />  
                    </f:facet> 
                    <p:spinner id="ajaxspinner" immediate="true" value="#{prod.quantite}" 
                               onchange="#{mbPanier.modifierQuantiteProduit(prod.produitVignette.id, prod.quantite)}" min="1" max="20">  
                        <p:ajax update="@form"  process="@this" />  
                    </p:spinner> 
                </p:column> 

                <p:column>  
                    <f:facet name="header">  
                        <h:outputText value="Prix" />  
                    </f:facet>  
                    <h:outputText id="updateprixproduit" value="#{prod.produitVignette.prix * prod.quantite}" />  
                </p:column>
                
                                
                <p:column>  
                    <f:facet name="header">  
                        <h:outputText value="Retirer produit" />  
                    </f:facet>  
                    <p:commandButton icon="ui-icon-close" immediate="true" action="#{mbPanier.retirerProduit(prod)}" update="@form" process="@this">
                    </p:commandButton>
                </p:column>
                
                <f:facet name="footer">  
                    <h:outputText id="updateprixtotal" value="Prix total = #{mbPanier.calculerPrixTotal()}"></h:outputText>
                </f:facet> 
            </p:dataTable>
                <p:commandButton value="Passer commande" action="PasserCommande.xhtml" rendered="#{!empty mbPanier.produitsList and mbeanLogin.logged}" ajax="false"/>
                <h:outputText value="Veuillez vous inscrire ou vous connectez pour passer commande" rendered="#{!mbeanLogin.logged}" style="color: red"/>
            </h:form>
        </ui:define>
    </ui:composition>
</html>
